<template>
  <div class="mycard-container">
    <div class="mycard-title">{{ title }}</div>
    <bsc-subtitle :subtitle="subtitle" />
    <div class="chart-wrapper">
      <discharge-chart
        :chart-data="chartData"
        style="height: 100%; width: 100%"
      />
    </div>
    <bsc-subtitle :subtitle="subtitle1" class="ftitle" />
    <div class="chart-wrapper1">
      <div
        v-for="(item, index) in chartItems"
        :key="index"
        class="wrapper-item"
      >
        <discharge-chart-bt
          :chart-data="chartData"
          :icon-image="item.iconImage"
          :title="item.title"
          :value="item.value"
          :tons="item.tons"
          :unit="item.unit"
          :ring-color="item.ringColor"
          style="height: 100%; width: 100%"
        />
      </div>
    </div>
  </div>
</template>

<script>
import BscSubtitle from "./subtitle.vue";
import DischargeChart from "./discharge-chart.vue";
import DischargeChartBt from "./discharge-chart-bt.vue";

export default {
  name: "Bscqyglcard",
  components: {
    BscSubtitle,
    DischargeChart,
    DischargeChartBt,
  },
  props: {
    title: {
      type: String,
      required: true,
      default: "默认标题",
    },
    chartItems: {
      type: Array,
      default: () => [
        {
          iconImage: "card-lv.png",
          title: "最高卸船效率",
          value: 78,
          unit: "万吨",
          ringColor: "#4bf3f9",
        },
      ],
    },
  },
  data() {
    return {
      subtitle: "卸船量",
      subtitle1: "历史之最",
      chartData: [
        { month: "1月", value: 1200 },
        { month: "2月", value: 1800 },
        { month: "3月", value: 1500 },
        { month: "4月", value: 2200 },
        { month: "5月", value: 2800 },
        { month: "6月", value: 2100 },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.mycard-container {
  width: 100%;
  height: 52%;
  position: relative;
  color: #fff;
  background: url("~@/assets/images/qyjj.png") left center / 100% 100% no-repeat;
  .mycard-title {
    position: absolute;
    top: 5px;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    text-shadow: rgb(0, 117, 255) 0px 0px 8px;
    padding: 0px;
    // font-family: "";
  }

  .chart-wrapper {
    height: 35%;
    width: 88%;
    margin: 0 auto;
    margin-top: 76px;
  }
  .ftitle {
    position: absolute;
    top: 50%;
  }
  .chart-wrapper1 {
    height: 35%;
    width: 88%;
    margin: 0 auto;
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    .wrapper-item {
      width: calc(50% - 5px);
      height: 50%;
    }
  }
}
</style>
